<template>
  <div class="app-container">
    <div style="width: 100%;" :style="getAvailableHeight">
      <L7Map @mapLoaded="handleMapLoaded" :zoom="13">

        <div
          style="position: absolute;top: 0;right: 0;padding: 0 11px;z-index: 1000;background-color: #EEE;">
          <el-button type="text" size="small" v-on:click.stop="handleToolBarClick(1)">分析工具</el-button>
          <el-button type="text" size="small" @click="handleToolBarClick(2)">图层控制</el-button>

          <!--          <img :src="require(`@/assets/leakage/analysis.png`)" width="24" height="24" alt="" title="分析工具"-->
          <!--               style="margin-right: 20px;"-->
          <!--               @click="handleToolBarClick(1)">-->
          <!--          <img :src="require(`@/assets/leakage/layer.png`)" width="24" height="24" alt="" title="图层"-->
          <!--               @click="handleToolBarClick(2)">-->
        </div>

        <div style="position: absolute;top: 50px;right: 0;height: calc(100% - 40px);z-index: 1000;color: #FFFFFF;"
             v-show="layerPanelVisible">
          <el-card style="height: 100%;">
            <el-tree :data="layerTreeData"
                     show-checkbox
                     node-key="id"
                     default-expand-all
                     :default-checked-keys="selectedTreeNodeKeys"
                     :props="treeDefaultProps">
              <template slot-scope="{ node, data }">
                <div v-if="data.layerIcon" style="display: flex;align-items: center;">
                  <img :src="getLayerNodeImage(data)" alt="" style="width: 16px;height: 16px;margin-right: 5px;">
                  <span style="font-size: 12px;">{{ data.name }}</span>
                  <span style="font-size: 12px;">{{ data.count ? `(${data.count})` : '' }}</span>
                </div>
                <div v-else>
                  <span style="font-size: 12px;">{{ data.name }}</span>
                  <span style="font-size: 12px;">{{ data.count ? `(${data.count})` : '' }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </div>

        <div style="position: absolute;top: 0;right: 142px;height: calc(100% - 40px);z-index: 1000;color: #FFFFFF;"
             v-show="toolBtnBarVisible">
          <el-button size="small" type="primary" @click="handleToolBtnClick(1)">坐标定位</el-button>

          <el-dropdown size="small" @command="handleToolBtnClick" style="margin: 0 10px;">
            <el-button size="small" type="primary">
              分析工具<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="2">关阀预案分析</el-dropdown-item>
              <el-dropdown-item divided :command="3">火灾分析</el-dropdown-item>
              <el-dropdown-item divided :command="4">预警分析</el-dropdown-item>
              <el-dropdown-item divided :command="5">连通性分析</el-dropdown-item>
              <el-dropdown-item divided :command="6">高程差分析</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown size="small" @command="handleToolBtnClick">
            <el-button size="small" type="primary">
              查询工具<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="7">管网要素查询</el-dropdown-item>
              <el-dropdown-item divided :command="8">管线长度查询</el-dropdown-item>
              <el-dropdown-item divided :command="9">设施数量查询</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div style="position: absolute;top: 60px;right: 0;z-index: 1000;background-color: #FFFFFF;"
             v-show="toolBarContentVisible">
          <div
            style="background-color: #1890ff;padding: 5px 10px;color: #FFFFFF;display: flex;justify-content: space-between;">
            <div>{{ toolBtnTitle[toolBtnIndex] }}</div>
            <div @click="toolBarContentVisible=false" style="cursor: pointer;"><i class="el-icon-close"></i></div>
          </div>

          <div style="padding: 10px;" v-show="toolBtnIndex===1">
            <el-form ref="locatorForm" v-model="locatorForm" label-width="60px">
              <el-form-item label="X坐标">
                <el-input v-model="locatorForm.x" size="mini"/>
              </el-form-item>
              <el-form-item label="Y坐标">
                <el-input v-model="locatorForm.y" size="mini"/>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" @click="handleLocatorClick">定位</el-button>
                <el-button size="mini" type="danger" @click="handleFormReset('locatorForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div style="padding: 10px;" v-show="toolBtnIndex===2">
            <div style="text-align: right;">
              <el-button size="mini" type="primary" icon="el-icon-location-outline"
                         v-on:click.stop="handleLeakPickupClick">爆管选点
              </el-button>
              <el-button size="mini" type="danger" icon="el-icon-refresh" :disabled="!mouseTipVisible"
                         v-on:click.stop="handleResetLeakPickupClick">重置选点
              </el-button>
              <el-button size="mini" type="success" icon="el-icon-search" :disabled="!mouseTipVisible"
                         v-on:click.stop="handleLeakAnalysisClick">爆管分析
              </el-button>
              <el-button size="mini" type="warning" icon="el-icon-download" :disabled="!demoTreeData.length">导出预案
              </el-button>
            </div>

            <div style="display: flex;justify-content: space-between;margin-top: 10px;">
              <div style="padding: 10px;border: 1px solid #E3E3E3;">
                <el-tree :data="demoTreeData"
                         show-checkbox
                         node-key="id"
                         :default-expanded-keys="[2, 3]"
                         :default-checked-keys="[5]"
                         :props="demoTreeDefaultProps">
                </el-tree>
              </div>

              <div style="margin-left: 10px;">
                <el-table size="mini" border style="width: 100%">
                  <el-table-column type="index" label="#" width="40"></el-table-column>
                  <el-table-column prop="date1" label="点号" width="180"></el-table-column>
                  <el-table-column prop="date2" label="级别" align="center" width="80"></el-table-column>
                  <el-table-column prop="date3" label="设施名称" width="180"></el-table-column>
                  <el-table-column prop="date4" label="开关状态" align="center" width="80"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>

          <div style="padding: 10px;" v-show="toolBtnIndex===3">
            <div style="text-align: right;">
              <el-button size="mini" type="primary" icon="el-icon-location-outline">火灾选点</el-button>
              <el-button size="mini" type="danger" icon="el-icon-refresh">重置选点</el-button>
              <el-button size="mini" type="success" icon="el-icon-search">火灾分析</el-button>
              <el-button size="mini" type="warning" icon="el-icon-download">导出</el-button>
            </div>

            <div style="margin-top: 10px;">
              <el-table size="mini" border style="width: 100%">
                <el-table-column type="index" label="#" width="40"></el-table-column>
                <el-table-column prop="date1" label="点号" width="180"></el-table-column>
                <el-table-column prop="date2" label="级别" align="center" width="80"></el-table-column>
                <el-table-column prop="date3" label="设施名称" width="180"></el-table-column>
                <el-table-column prop="date4" label="开关状态" align="center" width="80"></el-table-column>
              </el-table>
            </div>
          </div>

          <!--预警分析-->
          <div style="padding: 10px;" v-show="toolBtnIndex===4">
            <div style="text-align: right;">
              <el-form :inline="true" v-model="featureAlarmQueryForm">
                <el-form-item label="预警对象">
                  <el-select size="mini" placeholder="请选择" style="width: 160px;"
                             v-model="featureAlarmQueryForm.featureType"
                  >
                    <el-option label="管点" value="point"></el-option>
                    <el-option label="管线" value="line"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="预警年限">
                  <el-input-number size="mini" placeholder="请输入预警年限" :min="1" style="width: 120px;"
                                   v-model="featureAlarmQueryForm.featureYears"></el-input-number>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" type="success" icon="el-icon-search" @click="handleFeatureAlarmQueryClick">
                    查询
                  </el-button>
                  <el-button size="mini" type="warning" icon="el-icon-download">导出</el-button>
                </el-form-item>
              </el-form>
            </div>

            <div style="margin-top: 10px;">
              <el-table size="mini" border style="width: 100%" v-if="featureAlarmQueryForm.featureType==='point'"
                        :data="featureAlarmPointTableData" v-loading="featureAlarmQueryLoading" :height="400">
                <el-table-column type="index" label="#" width="40"></el-table-column>
                <el-table-column prop="expNo" label="点号" align="center" width="100"></el-table-column>
                <el-table-column prop="scode" label="设施类别" align="center" width="100">
                  <template slot-scope="scope">
                    {{ getDictText(dict.type.point_type, scope.row.scode) }}
                  </template>
                </el-table-column>
                <el-table-column prop="feature" label="设施名称" align="center" width="150"></el-table-column>
                <el-table-column prop="mdate" label="建设日期" align="center" width="100"></el-table-column>
                <el-table-column prop="address" label="地址" width="180"></el-table-column>
                <el-table-column prop="pId" label="工程号" width="180"></el-table-column>
              </el-table>

              <el-table size="mini" border style="width: 100%" v-if="featureAlarmQueryForm.featureType==='line'"
                        :data="featureAlarmLineTableData" v-loading="featureAlarmQueryLoading" :height="400">
                <el-table-column type="index" label="#" width="40"></el-table-column>
                <el-table-column prop="sPoint" label="起点编号" width="100"></el-table-column>
                <el-table-column prop="ePoint" label="终点编号" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.ePoint }}
                  </template>
                </el-table-column>
                <el-table-column prop="material" label="管线材质" width="120">
                  <template slot-scope="scope">
                    {{ getDictText(dict.type.pipe_material, scope.row.material) }}
                  </template>
                </el-table-column>
                <el-table-column prop="dn" label="管线口径" width="100">
                  <template slot-scope="scope">
                    {{ getDictText(dict.type.pipe_dn, scope.row.dn) }}
                  </template>
                </el-table-column>
                <el-table-column prop="mdate" label="建设日期" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" width="180"></el-table-column>
                <el-table-column prop="pId" label="工程号" width="180"></el-table-column>
              </el-table>
            </div>
          </div>

          <!--连通性分析-->
          <div style="padding: 10px;" v-show="toolBtnIndex===5">
            <div style="text-align: right;">
              <div style="margin-bottom: 10px;">
                <el-button size="mini" type="primary" icon="el-icon-search">起点选样</el-button>
                <el-button size="mini" type="primary" icon="el-icon-search">终点选样</el-button>
                <el-button size="mini" type="success" icon="el-icon-search">查询</el-button>
                <el-button size="mini" type="warning" icon="el-icon-download">导出</el-button>
              </div>

              <el-form label-width="80px">
                <el-form-item label="起点坐标">
                  <el-input size="mini" readonly style="width: 100%;"/>
                </el-form-item>
                <el-form-item label="终点坐标">
                  <el-input size="mini" readonly style="width: 100%;"/>
                </el-form-item>
              </el-form>
            </div>

            <div>
              <div style="color: #1890ff;font-size: 21px;font-weight: bold;">连通性分析结果</div>
              <div class="link-analysis-box">
                <div class="link-analysis-box-item">连通</div>
              </div>
            </div>
          </div>

          <div style="padding: 10px;" v-show="toolBtnIndex===6">
            <div style="text-align: right;">
              <div style="margin-bottom: 10px;">
                <el-button size="mini" type="primary" icon="el-icon-search">起点选样</el-button>
                <el-button size="mini" type="primary" icon="el-icon-search">终点选样</el-button>
                <el-button size="mini" type="success" icon="el-icon-search">查询分析</el-button>
              </div>

              <el-form label-width="80px">
                <el-form-item label="起点坐标">
                  <el-input size="mini" readonly style="width: 100%;"/>
                </el-form-item>
                <el-form-item label="终点坐标">
                  <el-input size="mini" readonly style="width: 100%;"/>
                </el-form-item>
              </el-form>
            </div>

            <div>
              <el-descriptions class="margin-top" :column="2" size="mini" direction="vertical" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    起点名称
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    终点名称
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    起点位置
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    终点位置
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    起点高程
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    终点高程
                  </template>
                  kooriookami
                </el-descriptions-item>
              </el-descriptions>

              <div>
                <div style="color: #1890ff;font-size: 20px;font-weight: bold;margin: 10px 0;">起点和终点高程差：2.3米
                </div>
                <div style="width: 100%;height: 200px;border: 1px solid #E3E3E3;"></div>
              </div>
            </div>
          </div>

          <!--管网要素查询-->
          <div style="padding: 10px;" v-show="toolBtnIndex===7">
            <div style="display: flex;justify-content: end;margin-bottom: 10px;">
              <div>
                <span style="margin-right: 5px;color: #606266;">查询要素</span>
                <el-select size="mini" placeholder="请选择" style="width: 140px;margin-right: 20px;"
                           v-model="pipeFeatureSearch.type"
                >
                  <el-option label="管点" value="point"></el-option>
                  <el-option label="管线" value="line"></el-option>
                </el-select>
              </div>

              <div>
                <span style="margin-right: 5px;color: #606266;">字段名称</span>
                <el-select size="mini" style="width: 140px;margin-right: 10px;" v-if="pipeFeatureSearch.type==='line'"
                           v-model="pipeFeatureSearch.lineField">
                  <el-option v-for="option in pipeFeatureSearch.lineFieldData"
                             :value="option.field"
                             :label="option.name">
                  </el-option>
                </el-select>
                <el-select size="mini" style="width: 140px;margin-right: 10px;" v-else
                           v-model="pipeFeatureSearch.pointField">
                  <el-option v-for="option in pipeFeatureSearch.pointFieldData"
                             :value="option.field"
                             :label="option.name">
                  </el-option>
                </el-select>
              </div>

              <div>
                <el-button size="mini" type="primary" icon="search" @click="handlePipeFeatureQuery">查询</el-button>
              </div>
            </div>

            <div style="display: flex;justify-content: end;margin-bottom: 10px;">
              <div>
                <span style="width: 64px;margin-right: 5px;color: #606266;">运算符</span>
                <el-select size="mini" style="width: 140px;margin-right: 36px;" v-model="pipeFeatureSearch.operator">
                  <el-option v-for="option in pipeFeatureSearch.operatorData"
                             :value="option.id"
                             :label="option.name">
                  </el-option>
                </el-select>
              </div>

              <div>
                <span style="width: 64px;margin-right: 5px;color: #606266;">运算值</span>
                <el-input size="mini" v-model="pipeFeatureSearch.value" style="width: 140px;margin-right: 10px;"/>
              </div>

              <div>
                <el-button size="mini" type="warning">导出</el-button>
              </div>
            </div>

            <el-table size="mini" border style="width: 100%" v-if="pipeFeatureSearch.type==='line'"
                      :data="pipeFeatureSearch.lineData">
              <el-table-column type="index" label="#" width="40"></el-table-column>
              <el-table-column v-for="item in pipeFeatureSearch.lineTable"
                               :label="item.label" :prop="item.prop" :align="item.align"
                               :width="item.width"></el-table-column>
            </el-table>

            <el-table size="mini" border style="width: 100%" v-else :data="pipeFeatureSearch.pointData">
              <el-table-column type="index" label="#" width="40"></el-table-column>
              <el-table-column v-for="item in pipeFeatureSearch.pointTable"
                               :label="item.label" :prop="item.prop" :align="item.align"
                               :width="item.width"></el-table-column>
            </el-table>
          </div>

          <!--管线长度查询-->
          <div style="padding: 10px;" v-show="toolBtnIndex===8">
            <div style="display: flex;justify-content: end;margin-bottom: 10px;">
              <div>
                <span style="margin-right: 5px;color: #606266;">管线材质</span>
                <el-select size="mini" style="width: 180px;margin-right: 10px;" multiple
                           v-model="pipeLengthQueryForm.pipeMaterial">
                  <el-option v-for="dict in dict.type.pipe_material"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value">
                  </el-option>
                </el-select>
              </div>

              <div>
                <span style="margin-right: 5px;color: #606266;">管线口径</span>
                <el-select size="mini" style="width: 180px;margin-right: 10px;" multiple
                           v-model="pipeLengthQueryForm.pipeDn">
                  <el-option v-for="dict in dict.type.pipe_dn"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value">
                  </el-option>
                </el-select>
              </div>

              <div>
                <el-button size="mini" type="primary" icon="search" @click="handlePipeLengthQuery">查询</el-button>
                <el-button size="mini" type="warning">导出</el-button>
              </div>
            </div>

            <div style="width: 100%;margin: 10px 0;text-align: right;color: #1890ff;">
              管线长度合计：{{ getAllPipeLength }}
            </div>

            <el-table size="mini" border style="width: 100%" v-loading="pipeLengthQueryLoading"
                      :data="pipeLengthTableData" :height="400">
              <el-table-column type="index" label="#" width="40"></el-table-column>
              <el-table-column prop="sPoint" label="起点编号" align="center" width="120"></el-table-column>
              <el-table-column prop="ePoint" label="终点编号" align="center" width="120"></el-table-column>
              <el-table-column prop="material" label="管线材质" align="center" width="120">
                <template slot-scope="scope">
                  {{ getDictText(dict.type.pipe_material, scope.row.material) }}
                </template>
              </el-table-column>
              <el-table-column prop="dn" label="管线口径" align="center" width="100">
                <template slot-scope="scope">
                  {{ getDictText(dict.type.pipe_dn, scope.row.material) }}
                </template>
              </el-table-column>
              <el-table-column prop="lineLength" label="管线长度(米)" align="center" width="140"></el-table-column>
            </el-table>
          </div>

          <!--设施数量查询-->
          <div style="padding: 10px;" v-show="toolBtnIndex===9">
            <div style="display: flex;justify-content: end;margin-bottom: 10px;">
              <div>
                <span style="margin-right: 5px;color: #606266;">设施类型</span>
                <el-select size="mini" style="width: 180px;margin-right: 10px;" multiple
                           v-model="pointTypeCountQueryForm.pointType">
                  <el-option v-for="dict in dict.type.point_type"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value">
                  </el-option>
                </el-select>
              </div>

              <div>
                <el-button size="mini" type="primary" icon="search" @click="handlePointTypeCountQuery">查询</el-button>
                <el-button size="mini" type="warning">导出</el-button>
              </div>
            </div>

            <div style="width: 100%;margin: 10px 0;text-align: right;color: #1890ff;">
              设施数量合计：{{ getPointTypeCount }}个
            </div>

            <el-table size="mini" border style="width: 100%" v-loading="pointTypeQueryLoading"
                      :data="pointTypeCountTableData" :height="400">
              <el-table-column type="index" label="#" width="40"></el-table-column>
              <el-table-column prop="pointType" label="设施类型" align="center" width="200">
                <template slot-scope="scope">
                  {{ getDictText(dict.type.point_type, scope.row.pointType) }}
                </template>
              </el-table-column>
              <el-table-column prop="count" label="个数" align="center" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </L7Map>
    </div>

    <MouseTip v-if="mouseTipVisible">{{ mouseTipText }}</MouseTip>
  </div>
</template>

<script>
import {Feature, Point} from '@turf/turf';
import L7Map from "@/components/L7Maps/map.vue";
import {Marker, MarkerLayer, Zoom, PointLayer, LineLayer, PolygonLayer} from "@antv/l7";
import {listGisLayerTree} from "@/api/leakage/gisLayer";
import {
  listGisPoint,
  updateGisPoint,
  getPointTypeCount,
  getPointAlarmData,
  getPointFeatureData
} from "@/api/leakage/gisPoint";
import {
  listGisLine,
  updateGisLine,
  getPipeLengthData,
  getLineAlarmData,
  getLineFeatureData
} from "@/api/leakage/gisLine";
import {DrawPoint, DrawLine, DrawControl, ControlEvent, DrawEvent} from '@antv/l7-draw';
import MouseTip from '@/components/MouseTip/index.vue'
import {getGraph} from '@/utils/mapfunction/graphs'

function sumArray(arr) {
  return arr.reduce(function (total, value) {
    return total + value;
  }, 0);
}

export default {
  name: 'PipeNetworkAnalysis',
  components: {L7Map, MouseTip},
  dicts: ['point_type', 'pipe_dn', 'pipe_material', 'terminal_supplier'],
  data() {
    return {
      // 屏幕高度
      screenHeight: null,
      // 图分析工具对象
      graphObj: null,
      // 鼠标跟随文字
      mouseTipText: '测试一下',
      // 鼠标跟随文字是否可见
      mouseTipVisible: false,
      // 地图场景对象
      mapScene: undefined,
      // 控件分析标记图层
      analysisMarkerLayer: undefined,
      // 图层面板是否可见
      layerPanelVisible: true,
      // 图层树数据
      layerTreeData: [],
      // 图层树选中的树节点
      selectedTreeNodes: [],
      // 图层树选中的树节点键值
      selectedTreeNodeKeys: [],
      // 图层树配置选项
      treeDefaultProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled'
      },
      // 工具栏是否可见
      toolBtnBarVisible: false,
      // 工具栏激活工具索引
      toolBtnIndex: false,
      // 工具栏激活工具名称
      toolBtnTitle: ['', '坐标定位', '关阀预案', '火灾分析', '预警分析', '连通性分析', '高程差分析', '管网要素查询', '管线长度查询', '设施数量查询'],
      // 工具按钮对应操作内容是否可见
      toolBarContentVisible: false,
      // 管线标记点类型
      linePointMarkType: undefined,
      demoTreeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      demoTreeDefaultProps: {
        children: 'children',
        label: 'label'
      },
      locatorForm: {},
      locatorMarker: undefined,
      //管网要素查询
      pipeFeatureSearch: {
        value: '',
        type: 'point',
        lineField: 'dS',
        lineFieldData: [
          {field: 'dS', name: '管径',},
          {field: 'lineLength', name: '管线长度',},
          {field: 'sDeep', name: '起点埋深',},
          {field: 'eDeep', name: '终点埋深',},
        ],
        pointField: 'scode',
        pointFieldData: [
          {field: 'scode', name: '设施类别',},
          {field: 'meterial', name: '材质',},
          {field: 'spec', name: '规格',},
          {field: 'deep', name: '埋深',},
        ],
        operator: 'EQ',
        operatorData: [
          {id: 'LIKE', name: '模糊查询',},
          {id: 'GT', name: '大于',},
          {id: 'GE', name: '大于等于',},
          {id: 'LT', name: '小于',},
          {id: 'LE', name: '小于等于',},
          {id: 'EQ', name: '等于',},
          {id: 'NE', name: '不等于',},
        ],
        lineTable: [
          {label: '起点编号', prop: 'sPoint', align: 'center', width: 100},
          {label: '终点编号', prop: 'ePoint', align: 'center', width: 100},
          {label: '管径', prop: 'dn', align: 'center', width: 100},
          {label: '材质', prop: 'meterial', align: 'center', width: 100},
          {label: '起点埋深', prop: 'sDeep', align: 'center', width: 100},
          {label: '终点埋深', prop: 'eDeep', align: 'center', width: 100},
          {label: '地址', prop: 'address', align: 'center', width: 150},
          {label: '工程号', prop: 'pId', align: 'center', width: 100},
        ],
        lineData: [],
        pointTable: [
          {label: '点号', prop: 'expNo', align: 'center', width: 100},
          {label: '设施类别', prop: 'scode', align: 'center', width: 100},
          {label: '材质', prop: 'meterial', align: 'center', width: 100},
          {label: '规格', prop: 'spec', align: 'center', width: 100},
          {label: '埋深', prop: 'deep', align: 'center', width: 100},
          {label: '地址', prop: 'address', align: 'center', width: 150},
          {label: '工程号', prop: 'pId', align: 'center', width: 100},
        ],
        pointData: [],
      },
      pipeLeakPickupDraw: undefined,
      // 预警分析表单
      featureAlarmQueryForm: {
        featureType: 'point',
        featureYears: 1
      },
      // 预警分析数据
      featureAlarmPointTableData: [],
      featureAlarmLineTableData: [],
      // 预警分析查询数据状态
      featureAlarmQueryLoading: false,
      // 管线长度查询表单
      pipeLengthQueryForm: {},
      // 管线长度查询数据
      pipeLengthTableData: [],
      // 管线长度查询数据状态
      pipeLengthQueryLoading: false,
      // 设施数量查询表单
      pointTypeCountQueryForm: {},
      // 设施数量查询数据
      pointTypeCountTableData: [],
      // 设施数量查询数据状态
      pointTypeQueryLoading: false,
      // 绘制控件当前绘制类型
      drawControlType: undefined,
      // 地图线图层列表
      mapLineLayerList: [],
      // 编辑中的线图层绘制工具对象
      editingLineDrawer: undefined,
      // 编辑中的线图层要素
      editingLineFeature: undefined,
      // 编辑中的线图层要素业务对象
      editingLineFeatureBizObj: undefined,
      // 地图点图层列表
      mapPointLayerList: [],
      // 编辑中的点图层绘制工具对象
      editingPointDrawer: undefined,
      // 编辑中的点图层要素
      editingPointFeature: undefined,
      // 编辑中的点图层要素业务对象
      editingPointFeatureBizObj: undefined,
    }
  },
  methods: {
    handleMapLoaded(scene) {
      this.mapScene = scene
      this.analysisMarkerLayer = new MarkerLayer({})

      const zoom = new Zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小',
        position: 'bottomleft'
      });
      this.mapScene.addControl(zoom);
      this.mapScene.addImage('famen', '/images/gis-svg/GIS-TL_famen.png');
      this.mapScene.addImage('shuichang', '/images/gis-svg/GIS-TL_shuichang.png');
      this.mapScene.addImage('xiaofangshuan', '/images/gis-svg/GIS-TL_xiaoquxiaohuoshuan.svg');
      this.mapScene.addImage('lianjiedian', '/images/gis-svg/GIS-TL_linkpoint.png');
    },
    getDictText(dictList, key) {
      console.log(dictList, key)
      if (dictList && key) {
        const target = dictList.filter(item => item.value === key)[0]
        return target.label
      }
      return ''
    },
    // 查询图层数据
    getGisLayers() {
      listGisLayerTree({}).then(res => {
        this.layerTreeData = res.data
        this.layerTreeData.forEach(item => this.checkTreeNode(item))
        this.initMapLayers()
      })
    },
    getLayerNodeImage(data) {
      return require(`@/assets/gis-svg/` + data.layerIcon)
    },
    // 设置图层选中节点
    checkTreeNode(item) {
      if (!item.disabled) {
        this.selectedTreeNodes.push(item)
        this.selectedTreeNodeKeys.push(item.id)
      }
      if (item.children && item.children.length) {
        item.children.forEach(child => this.checkTreeNode(child))
      }
    },
    findTreeNode(tree, func) {
      for (const data of tree) {
        if (func(data)) return data
        if (data.children) {
          const res = this.findTreeNode(data.children, func)
          if (res) return res
        }
      }
      return null
    },
    updateLayerCount(layerId, count) {
      const target = this.findTreeNode(this.layerTreeData, (item) => item.id === layerId)
      if (target) {
        target.count = count
      }
      this.layerTreeData = [...this.layerTreeData]
    },
    resetMapLayers() {
      if (this.mapPointLayerList.length > 0 || this.mapLineLayerList.length > 0) {
        this.mapScene.removeAllLayer();
        this.mapPointLayerList = []
        this.mapLineLayerList = []
      }
    },
    // 初始化图层数据
    initMapLayers() {
      this.resetMapLayers()

      this.selectedTreeNodes.forEach(item => {
        if (item.layerType === 0) {
          // 初始化点图层 - begin
          listGisPoint({layerId: item.id}).then(res => {
            if (res.rows && res.rows.length) {
              this.updateLayerCount(item.id, res.rows.length)
              const pointLayer = new PointLayer({
                name: 'pointLayer-' + item.id,
                zIndex: 1000
              }).source(res.rows, {
                parser: {
                  type: 'json',
                  x: 'x',
                  y: 'y',
                }
              }).shape('scode', scode => {
                if (scode === '2') {
                  return 'shuichang'
                } else if (scode === '4') {
                  return 'xiaofangshuan'
                } else if (scode === '7') {
                  return 'famen'
                }
                return 'lianjiedian'
              }).size('scode', scode => {
                if (scode === '1') {
                  return 10
                }
                return 15
              }).select({
                color: '#ad7a10'
              })

              pointLayer.on('click', e => {
                const {x, y} = e.feature;
                this.resetEditingPoint()
                this.editingPointFeature = {
                  type: 'Feature',
                  properties: Object.assign({}, e.feature),
                  geometry: {
                    type: 'Point',
                    coordinates: [x, y],
                  },
                }
                this.editingPointFeatureBizObj = e.feature
                this.startPointEdit()
              });

              // pointLayer.on('unclick', (e) => {
              //   this.resetEditingPoint()
              //   this.pointFormVisible = false
              // })

              this.mapPointLayerList.push(pointLayer)
              this.mapScene.addLayer(pointLayer)

              if (item.name !== '节点') {
                const imageLayerText = new PointLayer()
                  .source(res.rows, {
                    parser: {
                      type: 'json',
                      x: 'x',
                      y: 'y',
                    }
                  })
                  .shape('feature', 'text')
                  .color('#1359e5')
                  .size(14)
                  .style({
                    textOffset: [0, 25],
                    fontWeight: 800
                  })
                this.mapScene.addLayer(imageLayerText)
              }
            }
          })
          // 初始化点图层 - end
        } else if (item.layerType === 1) {
          // 初始化线图层 - begin
          listGisLine({layerId: item.id}).then(res => {
            if (res.rows && res.rows.length) {

              res.rows.forEach(item => {
                // 将坐标从字符串转换为数组
                item.coordinates = JSON.parse(item.coordinates)
              })

              const lineLayer = new LineLayer({
                name: 'lineLayer-' + item.id,
                zIndex: 100
              }).source(res.rows, {
                parser: {
                  type: 'json',
                  coordinates: 'coordinates'
                }
              }).shape('line')
                .size(2)
                .color('red',)
                .select({color: '#00F'});

              lineLayer.on('click', e => {
                const {lng, lat} = e.lngLat;
                console.log(e, lng, lat)
                if (this.linePointMarkType === 'leak_point') {
                  const markerIcon = `/images/leak_point.png`
                  const markerContent = `<div><img src="${markerIcon}" style="width: 40px;height: 40px;" alt=""></div>`
                  let el = document.createElement('div')
                  el.innerHTML = markerContent
                  const marker = new Marker({element: el, draggable: false, offsets: [0, 0]}).setLnglat([lng, lat])
                  this.analysisMarkerLayer.addMarker(marker)
                  this.mapScene.addMarkerLayer(this.analysisMarkerLayer)
                  this.mouseTipVisible = false
                }
              });

              this.mapLineLayerList.push(lineLayer)
              this.mapScene.addLayer(lineLayer)
            }
          })
          // 初始化线图层 - end
        }
      })
    },
    handleToolBarClick(idx) {
      if (idx === 1) {
        this.toolBtnBarVisible = true
        this.layerPanelVisible = false
      } else {
        this.toolBtnBarVisible = false
        this.layerPanelVisible = true
      }
    },
    handleToolBtnClick(idx) {
      console.log(idx)
      this.toolBtnIndex = idx
      this.toolBarContentVisible = true
    },
    handleLocatorClick() {
      if (!this.locatorForm.x || !this.locatorForm.y) {
        this.$message.error('请输入X坐标和Y坐标')
      }

      const {x, y} = this.locatorForm
      console.log([x, y])
      this.locatorMarker = new Marker({}).setLnglat([x, y])
      this.mapScene.addMarker(this.locatorMarker)
      this.mapScene.panTo([x, y])
    },
    handleFormReset(formName) {
      if (formName === 'locatorForm') {
        this.locatorForm = {
          x: null,
          y: null,
        }
        this.mapScene.removeAllMarkers()
      }

      this.resetForm(formName);
    },
    // 爆管选点
    handleLeakPickupClick() {
      this.mouseTipText = '请在管线上选择爆管点'
      this.mouseTipVisible = true
      this.linePointMarkType = 'leak_point'
    },
    // 爆管选点 - 重置选点
    handleResetLeakPickupClick() {
      this.analysisMarkerLayer.clear()
      this.mouseTipVisible = true
    },
    // 爆管分析
    handleLeakAnalysisClick() {

    },
    // 预警分析查询
    handleFeatureAlarmQueryClick() {
      this.featureAlarmQueryLoading = true
      if (this.featureAlarmQueryForm.featureType === 'point') {
        getPointAlarmData(this.featureAlarmQueryForm).then(res => {
          this.featureAlarmQueryLoading = false
          this.featureAlarmPointTableData = res.data
        })
      } else {
        this.featureAlarmQueryLoading = true
        getLineAlarmData(this.featureAlarmQueryForm).then(res => {
          this.featureAlarmQueryLoading = false
          console.log(res.data)
          this.featureAlarmLineTableData = res.data
        })
      }
    },
    // 管网要素查询
    handlePipeFeatureQuery() {
      if (!this.pipeFeatureSearch.value) {
        this.$message.error('请输入运算值')
      } else {
        const query = {
          operator: this.pipeFeatureSearch.operator,
          value: this.pipeFeatureSearch.value
        }
        if (this.pipeFeatureSearch.type === 'point') {
          query.key = this.pipeFeatureSearch.pointField
          getPointFeatureData(query).then(res => {
            console.log(res)
            this.pipeFeatureSearch.pointData = res.data
          })
        } else {
          query.key = this.pipeFeatureSearch.lineField
          getLineFeatureData(query).then(res => {
            console.log(res)
            this.pipeFeatureSearch.lineData = res.data
          })
        }
      }
    },
    // 管线长度查询
    handlePipeLengthQuery() {
      if (!this.pipeLengthQueryForm.pipeMaterial.length || !this.pipeLengthQueryForm.pipeDn.length) {
        this.$message.error('请选择管线材质和管线口径')
      } else {
        const data = {
          material: this.pipeLengthQueryForm.pipeMaterial.join(','),
          dn: this.pipeLengthQueryForm.pipeDn.join(',')
        }
        this.pipeLengthQueryLoading = true
        getPipeLengthData(data).then(res => {
          this.pipeLengthQueryLoading = false
          this.pipeLengthTableData = res.data
        })
      }
    },
    // 设施数量查询
    handlePointTypeCountQuery() {
      if (!this.pointTypeCountQueryForm.pointType.length) {
        this.$message.error('请选择设施类型')
      } else {
        const data = {
          pointType: this.pointTypeCountQueryForm.pointType.join(','),
        }
        this.pointTypeQueryLoading = true
        getPointTypeCount(data).then(res => {
          this.pointTypeQueryLoading = false
          this.pointTypeCountTableData = res.data
        })
      }
    }
  },
  created() {
    this.getGisLayers()
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getAvailableHeight() {
      return {height: (this.screenHeight - 105) + 'px'}
    },
    getAllPipeLength() {
      const length = sumArray(this.pipeLengthTableData.map(item => item.lineLength))
      return length < 1000 ? length + '米' : (length / 1000.0).toFixed(2) + '公里'
    },
    getPointTypeCount() {
      return sumArray(this.pointTypeCountTableData.map(item => item.count))
    }
  },
  mounted() {
    //获取图形算法对象
    this.graphObj = getGraph()
  }
}
</script>

<style lang="scss" scoped>
.link-analysis-box {
  width: 201px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  background-image: url("../../../../assets/leakage/isLinked.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;

  &-item {
    color: red;
    font-size: 22px;
    font-weight: bold;
    transform: rotate(346deg);
    padding-top: 90px;
    margin-left: -20px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 15px !important;
}
</style>
